<template>
  <Navbar :title="'取餐'"></Navbar>
  <div class="take-wrap">
    <div v-if="isPay" class="ordertail">
      <div class="ordertail_cotent">
        <div class="ordertail_detail">
          <div class="ordertail_title">
            <div v-if="appointValue">预约{{ appointValue }}</div>
            <div v-else>我已到店</div>
            <span>取餐号</span>
            <img src="../assets/image/qrcode.png" alt="" />
          </div>
          <h1 v-if="goods_code < 10">000{{ goods_code }}</h1>
          <h1 v-if="goods_code < 100 && goods_code > 9">00{{ goods_code }}</h1>
          <h1 v-if="goods_code < 1000 && goods_code > 99">0{{ goods_code }}</h1>
          <h1 v-if="goods_code < 10000 && goods_code > 999">
            {{ goods_code }}
          </h1>
          <div class="ordertail_state">
            <div class="ordertail_state_now">
              <img src="../assets/image/order1.png" alt="" />
              <p>已下单</p>
            </div>
            <h4>·········</h4>
            <div>
              <img src="../assets/image/order2.png" alt="" />
              <p>制作中</p>
            </div>
            <h4>·········</h4>
            <div class="ordertail_state_now">
              <img src="../assets/image/order3.png" alt="" />
              <p>可取餐</p>
            </div>
          </div>
        </div>
        <div class="ordertail_order">
          <div
            class="ordertail_order_top"
            v-for="(item, index) in foodsList"
            :key="index"
          >
            <div class="ordertail_order_left">
              <p>{{ item.title }}</p>
              <span>{{
                item.sugar ? item.temp + "/" + item.sugar : item.tem
              }}</span>
            </div>
            <div class="ordertail_order_right">
              <span>×{{ item.count }}</span>
              <span>￥{{ item.price }}</span>
            </div>
          </div>
          <div class="ordertail_order_bottom">
            <span class="left">合计</span>
            <span class="right">￥{{ totalprice }}</span>
          </div>
          <p>下单时间：{{ add_time }}</p>
          <p>订单编号：{{ order_code }}</p>
        </div>
      </div>
    </div>
    <div v-else class="no-order">
      <div class="take-img">
        <img src="../assets/image/orderfrom.png" alt />
      </div>
      <div class="take-text">
        <p>您还没有订单，快去点一杯吧~</p>
      </div>
      <div class="take-btn">
        <button @click="toorder()">去点单</button>
      </div>
    </div>
  </div>
  <Tabbar></Tabbar>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Tabbar from "../components/Tabbar.vue";
import Navbar from "../components/Navbar.vue";
import { onBeforeMount } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import axios from "../utils/axios";
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      isPay: false,
      foodsList: [],
      goods_code: "",
      order_code: "",
      totalprice: "",
      add_time: "",
      appointValue: "",
    });

    const toorder = () => {
      router.push("/order");
    };
    onBeforeMount(async () => {
      let uid = JSON.parse(localStorage.getItem("userinfo")).uid;
      // console.log(uid);
      await axios
        .get("/getshopcart", {
          params: {
            uid: uid,
          },
        })
        .then((res) => {
          if (res.data.code == 1) {
            state.foodsList = JSON.parse(
              res.data.result[res.data.result.length - 1].shopcart
            );
          } else {
            Toast.fail(res.data.message);
          }
        });
      // state.foodsList = eval(
      //   "(" + window.localStorage.getItem("shopCart") + ")"
      // );\
      state.goods_code = localStorage.getItem("goods_code");
      state.order_code = localStorage.getItem("order_code");
      state.totalprice = localStorage.getItem("totalprice");
      state.add_time = localStorage.getItem("add_time");
      state.appointValue = localStorage.getItem("appointValue");
      state.isPay = JSON.parse(sessionStorage.getItem("isPay"));
    });
    return {
      ...toRefs(state),
      toorder,
    };
  },
  components: {
    Tabbar,
    Navbar,
  },
};
</script>

<style lang="less" scoped>
.take-wrap {
  p {
    margin: 0;
  }
  .ordertail {
    margin-top: 46px;
    background-color: #f3f3f3;
    padding: 10px;
    height: 555px;
    .ordertail_cotent {
      background-color: #fff;
      padding-top: 15px;
      font-size: 15px;
      .ordertail_detail {
        border-bottom: 1px solid #f3f3f3;
        border-radius: 5px;
        .ordertail_title {
          display: flex;
          justify-content: space-between;
          div {
            background-color: #403c38;
            color: #fff;
            padding: 4px 10px;
            border-top-right-radius: 15px;
          }
          span {
            margin-right: 40px;
          }
          img {
            height: 25px;
            width: 25px;
            margin-right: 15px;
          }
        }
        h1 {
          text-align: center;
        }
        .ordertail_state {
          display: flex;
          justify-content: space-around;
          padding: 0 20px;
          margin: 15px 0;
          .ordertail_state_now {
            opacity: 0.4;
          }
          p {
            font-size: 13px;
          }
          h4 {
            margin: 0;
            line-height: 43px;
          }
        }
      }
      .ordertail_order {
        padding: 10px;
        .ordertail_order_top {
          display: flex;
          justify-content: space-between;
          .ordertail_order_left {
            span {
              font-size: 12px;
              color: #adadad;
            }
          }
          .ordertail_order_right {
            padding: 7px;
            line-height: 28px;
            span:last-child {
              margin-left: 50px;
            }
          }
        }
        .ordertail_order_bottom {
          padding: 10px 0;
          display: flex;
          justify-content: space-between;
          .left {
            line-height: 28px;
          }
          .right {
            line-height: 28px;
            margin-right: 6px;
          }
        }
      }
    }
  }
  .no-order {
    .take-img {
      img {
        margin: 20px 24px;
      }
    }
    .take-text p {
      text-align: center;
      font-size: 17px;
      margin-bottom: 180px;
    }
    .take-btn button {
      text-align: center;
      width: 80%;
      margin-left: 10%;
      height: 50px;
      background-color: #e50055;
      color: #fff;
      border: 0;
      border-radius: 5px;
    }
  }
}
</style>